<template>
  <div class="box">
     <nav @click="goBack">&lt;
   
     </nav>
        <p class="p">报名成功</p>
    <header>
       
      <div>
        <span>1</span>
         <div>报名成功</div>
      </div>
      <div>
        <span>2</span>
         <div>添加辅导老师</div>
      </div>
    </header>
    <section class="centent">
      <p>请截图或保存下方二维码图片</p>
      <p>打开微信扫一扫，获取课程服务</p>
      <div class="map">
        <img src="/imgszn/二维码.jpg" alt="">
      </div>
      <div>点击下方按钮</div>
      <button>保存图片并打开微信</button>
    </section>
    
  </div>
</template>

<script>
export default {
  name: "Classify01S01",
  data() {
    return {};
  },
  components: {},
  methods:{
     goBack() {
      this.$router.back();
    },
  }
};
</script>

<style scoped>
  *{
  margin: 0;
  padding: 0;
}
html{
  font-size: 26.67vw;
  height: 100%;
}
body{
  font-size: .16rem;
  height: 100%;
}
.p{
  background: white;
  text-align: center;
  line-height: 0.6rem;
  font-size: .3rem;
}
nav {
  margin: auto;
  font-size: 0.5rem;
  position: absolute;
  top: 0rem;
  left: 0.05rem;
  text-align: center;
  line-height: 0.35rem;
  color: rgb(43, 41, 41);
}
.box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
 background: rgb(218, 216, 216);
}

header{
  width: 100%;
  height: 2rem;
  background: white;
  display: flex;
  justify-content: space-around;
  align-content: center;
  text-align: center;
}
header div:nth-child(1){
  height: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;line-height: .3rem;
}
header div:nth-child(2){
  display: flex;
  flex-direction: column;
  text-align: center;line-height: .3rem;
  height: 1rem;
}
header div:nth-child(1) span{
  width: .3rem;
  height: .3rem;
  background: orangered;
  border-radius: 50%;
  margin: auto;
   margin-top: .5rem;
}
header div:nth-child(2) span{
  width: .3rem;
  height: .3rem;
  background: orangered;
  border-radius: 50%;
  margin: auto;
   margin-top: .5rem;
}
section{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
  line-height: .5rem;
}
button{
  width: 2rem;
  height: .4rem;
  color: white;
  background: rgb(255, 0, 0);
  border: none;
  border-radius: 5%;
  text-align: center;
  line-height: .4rem;
  margin: auto;
}
.map{
  width: 2rem;
  height: 2rem;
  margin: auto;
}
img{
  width: 100%;
  height: 100%;
}
</style>
